<template>
    <div class="customBox addUserBox">
        <h3 class="title">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-input placeholder="请输入用户账户 (username)" v-model="searchKey" class="input-with-select">
                        <el-button slot="append" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                    </el-input>
                </el-col>
            </el-row>
        </h3>
        <div class="userBox">
            <h1 v-if="!userMessage">{{message}}</h1>
            <div class="userMessage" v-if="userMessage">
                <div class="avatar">
                    <img :src="headerImageKeyMapping[userMessage.avatar]" alt="">
                </div>
                <div class="name">
                    <span :class="{'man' : userMessage.gender == '1','woman' : userMessage.gender == '0'}">{{ userMessage.gender == '0' ? '♀' : '♂' }}</span>
                    <span class="nickname">{{userMessage.nickname}}</span>
                </div>
                <br>
                <div v-if="haveUser">
                    <div class="canChange">{{userMessage.permission == 'editor' ? '开发者' : (userMessage.permission == 'admin' ? '管理员' : '参与者')}}</div>
                    <br>
                    <div class="heveUser">已经在项目中</div>
                </div>
                <div v-if="!haveUser">
                    <el-dropdown @command="choosePremission">
                        <el-button type="">
                            <span class="canChange">{{permission}}</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="editor">开发者</el-dropdown-item>
                            <el-dropdown-item command="watcher">参与者</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button type="primary" @click="submit">加入项目</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headerImageKeyMapping from '../../../assets/headerImageMapping'

export default {
    props: ['getUserList', 'refresh'],
    data() {
        return {
            message: '',
            permission: '参与者',
            userMessage: null,
            joinUserType: '',
            searchKey: '',
            headerImageKeyMapping: headerImageKeyMapping,
            haveUser: false,
        }
    },
    methods: {
        submit() {
            // console.log('submit');
            window.action.project.addUser({
                userId: this.userMessage.userId,
                permission: this.joinUserType
            }).then((res) => {
                this.haveUser = true;
                this.userMessage.permission = this.joinUserType;
                this.refresh();
            });
        },
        choosePremission(value) {
            if (value == 'editor') {
                this.permission = '开发者';
                this.joinUserType = 'editor';
            } else if (value == 'watcher') {
                this.permission = '参与者';
                this.joinUserType = 'watcher';
            };
        },
        search() {
            this.message = '查找中，请稍等..'
            this.haveUser = false;
            this.joinUserType = 'watcher';
            window.action.project.searchUser(this.searchKey).then((res) => {
                if (res) {
                    this.userMessage = res;
                    var list = this.getUserList();
                    var userObject = {};
                    for (let i = 0; i < list.length; i++) {
                        const element = list[i];
                        if (res.userId == element.userId) {
                            this.haveUser = true;
                            this.userMessage.permission = element.permission;
                            break;
                        };
                    };
                } else {
                    this.message = '未查找到人员信息'
                };
            });
        },
    },
}
</script>
<style scoped>
    .addUserBox .title { width: 95%; margin: 0 auto; }
    .addUserBox .bottonBox { text-align: right; }
    .addButton { margin: 5px 0 0 0;}
    .userBox  h1{ text-align: center; line-height: 350px; color: #999;}
    .addUserBox .man { color: #409EFF;}
    .addUserBox .woman { color: #F56C6C;}
    .userMessage {text-align: center; padding: 50px 0 0 0; }
    .avatar { width: 150px; display: inline-block;}
    .avatar img { width: 100%; display: block; border-radius: 50%; border: 7px solid #409EFF;}
    .name { font-size: 22px; padding: 10px 0 0 0;}
    .canChange { color: #666; font-size: 16px;}
    .heveUser { color: #999; font-size: 14px;}
</style>